<template>
	<div class="content">
		<navBar :navBar="navBar" :callback="onClickRight"></navBar>
		<!-- <div class="emptyBox"></div> -->
		<div class="contentInner">
			<van-tabs v-model="active" color="#588bf7" title-active-color="#588bf7" @change="changetab">
				<van-tab :title="$t('在持')">
					<div class="list">
						<van-list v-model="loading" :finished="finished" :finished-text="$t('没有更多了')" @load="onLoad">
							<div class="onebox" v-for="(item, index) in list" :key="index">
								<div class="time">
									{{ $t("剩余时间") }}<van-count-down :time="item.chazhi" />
								</div>

								<div class="name">{{ item.bi_name }}/USDT</div>
								<div class="tab">
									<div :class="item.type == 1 ? 'duo' : 'kong'">
										{{ item.type == 1 ? $t("买多") : $t("买空") }}
									</div>
									<div class="num">
										<span class="linename">{{ $t("数量") }}</span>:{{ item.money }}<span>USDT</span>
									</div>
								</div>
								<div class="aline">
									<div class="linename">
										{{ $t("买入价") }}:{{ item.start_money }}
									</div>
									<!-- <div class="linename">{{$t('合约盈亏')}}</div -->
								</div>
								<!-- <div class="aline">
                <div class="linename">{{$t('卖出价')}}:{{ item.end_money }}</div>
                <div class="zhang">{{item.win_money}}</div>
                <div class="kui">-3.00</div> 
              </div> -->
								<div class="aline">
									<div class="linename">
										{{ $t("买入时间") }}:{{ getdate(item.addtime) }}
									</div>
								</div>
								<div class="aline">
									<div class="linename">
										{{ $t("订单时长") }}:{{ item.hold_time }}s
									</div>
								</div>
							</div>
						</van-list>
					</div>
				</van-tab>
				<van-tab :title="$t('历史')">
					<div class="list">
						<van-list v-model="loading" :finished="finished" :finished-text="$t('没有更多了')" @load="onLoad">
							<div class="onebox" v-for="(item, index) in list" :key="index">
								<div class="name">{{ item.bi_name }}/USD</div>
								<div class="tab">
									<div :class="item.type == 1 ? 'duo' : 'kong'">
										{{ item.type == 1 ? $t("买多") : $t("买空") }}
									</div>
									<div class="num">{{ item.money }}<span>USD</span></div>
								</div>
								<div class="aline">
									<div class="linename">
										{{ $t("买入价") }}:{{ item.start_money }}
									</div>
									<div class="linename">{{ $t("盈亏") }}</div>
								</div>
								<div class="aline">
									<div class="linename">
										{{ $t("卖出价") }}:{{ item.end_money }}
									</div>
									<div :class="item.win_money > 0 ? 'zhang duo' : 'zhang kui'">{{ item.win_money }}
									</div>
									<!-- <div class="kui">-3.00</div> -->
								</div>
								<div class="aline">
									<div class="linename">
										{{ $t("订单时长") }}:{{ item.hold_time }}s
									</div>
								</div>
								<div class="aline">
									<div class="linename">
										{{ $t("买入时间") }}:{{ getdate(item.addtime) }}
									</div>
								</div>
							</div>
						</van-list>
					</div>
				</van-tab>
			</van-tabs>
		</div>
	</div>
</template>

<script>
	import navBar from "@/components/navBar.vue";
	import {
		CountDown
	} from "vant";
	export default {
		name: "recharge",
		components: {
			navBar
		},
		data() {
			return {
				navBar: {
					back: true,
					title: this.$t("极速持仓"),
					close: false,
					btn: "",
					isBlue: true,
				},
				active: 0,
				page: 0,
				list: [],
				loading: false,
				finished: false,
			};
		},

		mounted() {},

		methods: {
			onClickLeft() {
				this.$router.go(-1);
			},
			onClickRight() {
				this.$router.push({
					name: "onlineService",
				});
			},
			changetab(name, title) {
				console.log(name, title);
				this.page = 0;
				this.list = [];
				this.onLoad();
			},
			//时间戳转日期
			getdate(nS) {
				//var offset = 	new Date().getTimezoneOffset() / 60 + 1;
				//console.log(offset);
				//var date = new Date(nS*1000 + offset * 3600  * 1000);  //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var date = new Date(nS * 1000);
				var year = date.getFullYear(),
					month = ("0" + (date.getMonth() + 1)).slice(-2),
					sdate = ("0" + date.getDate()).slice(-2),
					hour = ("0" + date.getHours()).slice(-2),
					minute = ("0" + date.getMinutes()).slice(-2),
					second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result =
					year +
					"-" +
					month +
					"-" +
					sdate +
					" " +
					hour +
					":" +
					minute +
					":" +
					second;
				// 返回
				return result;
			},
			onLoad() {
				var that = this;
				$postAxios(
					api.getUserSpeedOrderList, {
						status: this.active + 1,
						page: this.page,
						rows: 30,
					},
					(res) => {
						if (res.code == 0) {
							if (res.data.length) {
								if (that.page === 0) {
									// that.list = res.data;
									let data = res.data;
									data.forEach(function(v, i) {
										data[i]["chazhi"] = v.cha * 1000;
									});
									that.list = that.list.concat(data);
									console.log(that.list);
								} else {
									let data = res.data;
									data.forEach(function(v, i) {
										data[i]["chazhi"] = v.cha * 1000;
									});
									that.list = that.list.concat(data);
								}
								that.loading = false;
								that.page++;
							} else {
								that.finished = true;
							}
						}
					}
				);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		min-height: 100vh;
		height: auto;
		background-color: rgba(247, 246, 251, 1);

		.contentInner {
			width: 100%;
			position: absolute;
			left: 0;
			top: 40px;
			bottom: 0;
			box-sizing: border-box;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
		}

		::v-deep.van-tabs {
			height: 100%;

			.van-tabs__wrap {
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 999;
			}

			.van-tabs__content {
				width: 100%;
				height: calc(100% - 40px);
				position: absolute;
				left: 0;
				top: 40px;
				bottom: 0;
				box-sizing: border-box;
				overflow-y: auto;
				-webkit-overflow-scrolling: touch;
			}
		}

		.emptyBox {
			width: 100%;
			height: 40px;
		}

		.list {
			padding: 20px 10px;
			box-sizing: border-box;

			.onebox {
				padding: 0 10px;
				box-sizing: border-box;
				border-radius: 8px;
				background: #ffffff;
				margin-bottom: 20px;

				.time {
					text-align: center;
					color: #588bf7;
					font-size: 16px;
					padding: 20px 0 0;
					font-weight: bold;
				}

				.name {
					color: #000;
					font-size: 18px;
					font-weight: 600;
					padding: 10px 0;
				}

				.tab {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-bottom: 10px;

					.duo {
						padding: 5px 20px;
						box-sizing: border-box;
						background: #1cad90;
						font-size: 12px;
						color: #fff;
						-webkit-border-radius: 500px;
						border-radius: 500px;
					}

					.kong {
						padding: 5px 20px;
						box-sizing: border-box;
						background: #cd4e65;
						font-size: 12px;
						color: #fff;
						-webkit-border-radius: 500px;
						border-radius: 500px;
					}

					.num {
						font-size: 18px;
						color: #000;
						font-weight: 600;

						span {
							font-size: 12px;
						}
					}
				}

				.aline {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0px 0 5px;

					.linename {
						color: #213e58;
						font-weight: 700;
						font-size: 12px;
					}

					.zhang {
						color: #1cad90;
						font-size: 12px;
					}

					.kui {
						color: #cd4e65;
						font-size: 12px;
					}
				}
			}
		}
	}
</style>